<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="订单管理"></custom-navbar>

		<view class="search-wrap">
			<input class="search-input" v-model="keyword" placeholder="输入需要搜索的内容" @confirm="onSearch" />
			<text class="search-icon">🔍</text>
		</view>

		<view class="summary">
			<text class="count">共{{ orders.length }}条</text>
			<view class="status-filter" @click="toggleStatus">
				<text class="status-text">{{ statusText }}</text>
				<!-- <text class="arrow">▾</text> -->
				<image class="arrow-icon" src="/static/收起箭头下.png"
					mode="aspectFit"></image>
			</view>
		</view>

		<view class="list">
			<view class="card" v-for="(o, idx) in orders" :key="idx" @click="goDetail(o)">
				<view class="row between">
					<text class="order-no">订单号: {{ o.orderNo }}</text>
					<text class="amount">¥{{ o.amount }}</text>
				</view>
				<view class="divider"></view>
				<view class="row">
					<text class="label">下单用户：</text>
					<text class="val">{{ o.user }}</text>
				</view>
				<view class="row">
					<text class="label">预约时间：</text>
					<text class="val">{{ o.appointTime }}</text>
				</view>
				<view class="row">
					<text class="label">服务项目：</text>
					<text class="val">{{ o.items }}</text>
				</view>
				<view class="divider"></view>
				<view class="row between time-row">
					<text class="time-text">下单时间：{{ o.createTime }}</text>
					<button class="detail-btn" @click.stop="goDetail(o)">查看详情</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			'custom-navbar': () => import('@/components/custom-navbar.vue')
		},
		data() {
			return {
				keyword: '',
				statusIndex: 0,
				orders: [{
						id: 1,
						orderNo: '2021010831213',
						amount: '500',
						user: '张三丰',
						appointTime: '2023-03-10 11:00',
						items: '宝马X5加装轮、清洁车辆、汽车美容',
						createTime: '2022-10-12 11:09',
					},
					{
						id: 2,
						orderNo: '2021010831214',
						amount: '500',
						user: '张三丰',
						appointTime: '2023-03-10 11:00',
						items: '宝马X5加装轮、清洁车辆、汽车美容',
						createTime: '2022-10-12 11:09',
					},
					{
						id: 3,
						orderNo: '2021010831215',
						amount: '500',
						user: '张三丰',
						appointTime: '2023-03-10 11:00',
						items: '宝马X5加装轮、清洁车辆、汽车美容',
						createTime: '2022-10-12 11:09',
					}
				]
			};
		},
		computed: {
			statusText() {
				return ['待服务', '已完成', '已取消'][this.statusIndex] || '待服务';
			}
		},
		methods: {
			onSearch() {},
			toggleStatus() {
				this.statusIndex = (this.statusIndex + 1) % 3;
			},
			goDetail(o) {
				uni.navigateTo({
					url: `/pages/orders/detail?id=${o.id}&orderNo=${o.orderNo}`
				});
			}
		}
	};
</script>

<style>
	page {
		background-image: linear-gradient(180deg,
				#2f81fa 0, #2f81fa 35%,
				#f5f5f5 35%, #f5f5f5 100%);
		
	}
	.container {
		min-height: 100vh;
		padding-top: calc(env(safe-area-inset-top) + 88rpx);
	}

	.header {
		padding: 30rpx 30rpx 10rpx;
	}

	.title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
	}

	.search-wrap {
		margin: 20rpx 30rpx;
		background: #fff;
		border-radius: 44rpx;
		padding: 16rpx 24rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, .06);
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.search-icon {
		color: #6b6b6b;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		color: #fff;
	
	}

	.count {
		font-size: 28rpx;
	}

	.status-filter {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.status-text {
		font-size: 28rpx;
	}

	.arrow {
		font-size: 24rpx;
	}

	.list {
		padding: 20rpx 20rpx 0;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .06);
		
	}

	.row {
		display: flex;
		align-items: center;
		margin: 10rpx 0;
	}
	.arrow-icon{
		width: 26rpx;
		height: 26rpx;
		transform: rotate(0deg);
	}
	.between {
		justify-content: space-between;
	}

	.order-no {
		font-size: 28rpx;
		color: #222;
	}

	.amount {
		color: #ff3b30;
		font-size: 30rpx;
		font-weight: 600;
	}

	.divider {
		height: 2rpx;
		background: #eef0f4;
		margin: 16rpx 0;
	}

	.label {
		color: #666;
		font-size: 26rpx;
	}

	.val {
		color: #222;
		font-size: 26rpx;
	}

	.time-row {
		align-items: center;
	}

	.time-text {
		color: #b0b0b0;
		font-size: 24rpx;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 14rpx;
	}

	.detail-btn {
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 24rpx;
		background: #0a78ff;
		color: #fff;
		border: none;
		border-radius: 32rpx;
		font-size: 26rpx;
		
		margin-right: -10rpx;
	}

	page {
		background-image: linear-gradient(180deg,
				#2f81fa 0, #2f81fa 35%,
				#f5f5f5 35%, #f5f5f5 100%);
		background-repeat: no-repeat;
	}
</style>